Angular এর মাধ্যমে Google Charts-এ ডেটা ফেচ করা এবং তা চার্টে প্রদর্শন করা একটি সাধারণ এবং শক্তিশালী প্রক্রিয়া। আমরা একটি REST API বা অন্য কোন external API থেকে ডেটা ফেচ করতে পারি এবং সেই ডেটা Google Charts এর মাধ্যমে ভিজুয়ালাইজ করতে পারি। এই প্রক্রিয়াতে HttpClient মডিউল ব্যবহার করা হয় ডেটা ফেচ করার জন্য এবং Data Binding এর মাধ্যমে সেই ডেটা চার্টে ব্যবহার করা হয়।

এখানে একটি উদাহরণ দেওয়া হলো যেখানে আমরা API থেকে ডেটা ফেচ করে এবং সেটি Google Chart-এ Data Binding এর মাধ্যমে প্রদর্শন করব।

Step 1: Angular প্রজেক্টে HttpClient মডিউল ইমপোর্ট করা

প্রথমে Angular অ্যাপে HttpClient মডিউল ইমপোর্ট করতে হবে যাতে আমরা API থেকে ডেটা ফেচ করতে পারি।

app.module.ts ফাইল:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // HttpClientModule ইমপোর্ট করা হয়েছে
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule, // HttpClientModule এখানে যোগ করা হয়েছে
    GoogleChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এটি ইমপোর্ট করার পর আমরা HttpClient ব্যবহার করতে পারব।

Step 2: API থেকে ডেটা ফেচ করা

এখন, আমরা HttpClient ব্যবহার করে একটি API থেকে ডেটা ফেচ করব এবং সেই ডেটা Google Charts এর জন্য প্রস্তুত করব।

app.component.ts ফাইল:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'; // HttpClient ইমপোর্ট করা হয়েছে

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Google Charts - API Data Fetch';

  chartType = 'PieChart'; // Chart Type
  chartData: any[] = []; // Chart Data (Initially empty)
  chartOptions = {
    title: 'API Data Visualization',
    pieHole: 0.4,
    width: 600,
    height: 400
  };

  // API URL
  apiUrl = 'https://jsonplaceholder.typicode.com/posts';  // API URL যা থেকে ডেটা ফেচ করা হবে

  // HttpClient ইনজেক্ট করা
  constructor(private http: HttpClient) {}

  // API থেকে ডেটা ফেচ করার জন্য ngOnInit হুক ব্যবহার
  ngOnInit() {
    this.fetchDataFromAPI();
  }

  // API থেকে ডেটা ফেচ করা
  fetchDataFromAPI() {
    this.http.get<any[]>(this.apiUrl).subscribe(data => {
      // ডেটা প্রসেস করে chartData তে বাইন্ডিং
      this.chartData = data.map(item => [item.title, item.id]);  // Title এবং ID নির্বাচন করে chartData তে পরিবর্তন
    });
  }
}

এখানে, this.http.get<any[]>(this.apiUrl) দ্বারা আমরা একটি API থেকে ডেটা ফেচ করেছি। ফেচ করার পর ডেটা this.chartData এ ম্যাপ করা হয়েছে, যেখানে item.title এবং item.id ব্যবহৃত হচ্ছে, যা চার্টে প্রদর্শিত হবে।

Step 3: HTML ফাইলে Google Chart রেন্ডার করা

এখন, আমরা app.component.html ফাইলে ফেচ করা ডেটা দিয়ে Google Chart তৈরি করব। যখন ডেটা API থেকে আসবে, তখন তা Data Binding এর মাধ্যমে Google Chart এ প্রদর্শিত হবে।

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে, google-chart কম্পোনেন্টে [data]="chartData" ব্যবহার করে আমরা API থেকে ফেচ করা ডেটা বাইন্ড করছি।

Step 4: অ্যাপ্লিকেশন চালানো

এখন, অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি আপনার Google Chart দেখতে পারবেন, যা API থেকে ফেচ করা ডেটা ব্যবহার করে প্রদর্শিত হবে।

Data Binding এর মাধ্যমে আরও কাস্টমাইজেশন

আপনি চাইলে Data Binding এর মাধ্যমে API থেকে প্রাপ্ত ডেটার স্ট্রাকচার কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি যদি বিভিন্ন কলাম থেকে ডেটা প্রদর্শন করতে চান, তবে তা খুব সহজে map ফাংশন ব্যবহার করে করা সম্ভব।

উদাহরণ:

this.chartData = data.map(item => [item.userId, item.title, item.body]);

এখানে, আমরা userId, title, এবং body কে চার্টের ডেটা হিসাবে ব্যবহার করেছি।

সারাংশ

API থেকে ডেটা ফেচ করা এবং Data Binding একটি শক্তিশালী টুল যা Angular অ্যাপ্লিকেশনগুলোতে ডাইনামিক ডেটা ভিজুয়ালাইজেশন সম্ভব করে। HttpClient ব্যবহার করে আপনি যে কোনো REST API থেকে ডেটা ফেচ করতে পারেন এবং সেটি Google Charts এ Data Binding এর মাধ্যমে প্রদর্শন করতে পারেন। এই প্রক্রিয়া ডেটাকে আরও ইন্টারঅ্যাকটিভ এবং রিয়েল-টাইমে দেখতে সাহায্য করে।